<template>
	<view class="">
		<view v-if="nextNodeId">
			<view class="margin-tb" @tap="mfCheckHandler">
				<view class="text-bold margin-bottom">下一节点处理人</view>
				<u--input v-model="mfCheckPath" :disabled="true" :customStyle="inputDisabledCustomStyle" border="none" :placeholder=" `请选择下一节点处理人`">
				</u--input>
			</view>
			<view v-if="canText" class="margin-tb">
				<view class="text-bold margin-bottom">处理信息</view>
				<view>
					<u--textarea v-model="textData" placeholder="请输入处理结果" border="surround" :autoHeight="true"></u--textarea>
				</view>
			</view>
			<view v-if="canFile" class="margin-tb">
				<view class="width-p-100 padding-tb-sm">
					<view class="text-nowarp">
						<text class="text-bold">上传图片</text>
						<text class="margin-left text-sm text-gray">(最多可上传9张图片)</text>
					</view>
					<view class="margin-top width-p-100">
						<u-upload :fileList="cl_fileList" :previewFullImage="true" :deletable="true" @afterRead="clAfterRead" @delete="clDeletePic" name="eventImages" multiple :width="200"
							:height="200" :maxCount="9">
							<view class="upload-custom">
								<view>
									<view class="flex justify-center">
										<u-icon name="plus" color="#aaa" :size="40"></u-icon>
									</view>
									<view class="margin-top-sm text-center">上传图片</view>
								</view>
							</view>
						</u-upload>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-wrap align-center">
			<view v-for="(item,index) of actions" :key="index" class="action" :style="[ActionConfig[item].style]" @tap="onHandle(item)">
				{{ActionEnum[item]}}
			</view>
		</view>
		<WakinCascader ref="RefNextHandleCascader" workType="handler" :show.sync="nextHandlerShow" title="选择下一节点处理人" @check="mfCheckEventConfirm" @choose="mfChooseConfirm"></WakinCascader>
	</view>
</template>

<script>
	import {
		getCurrentNodeActions
	} from "@/api/Interface/event"
	import {
		ActionMap,
		ActionEnum,
		ActionConfig
	} from "@/enums/actions"
	import WakinCascader from "@/components/wakin-cascader/wakin-cascader.vue"
	import mixHandler from "./mixins/mixinsHandler"
	import mixUpload from "./mixins/mixinsUpload"
	export default {
		name: "EventNodeFlow",
		mixins: [mixHandler, mixUpload],
		components: {
			WakinCascader
		},
		props: {
			currentTaskId: {
				type: String,
				default: ""
			},
			lat: {
				type: [String, Number],
				default: ""
			},
			lon: {
				type: [String, Number],
				default: ""
			},
			// 当前节点id,获取当前流程动作用
			currentNodeId: {
				type: String,
				default: ""
			},
			// 下一节点 (如果不为空,说明有下一节点,需要选择下一节点处理人)
			nextNodeId: {
				type: String,
				default: ""
			},
			eventSubclass: {
				type: String,
				default: ""
			},
			eventTypeId: {
				type: String,
				default: ""
			},
			// 流程实例id
			instanceId: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				ActionMap,
				ActionEnum,
				ActionConfig,
				actions: [],
				canText: false, // 可以输入处理文字
				textData: "", // 处理文字
				canFile: false, // 可以上传处理附件
				fileList: [],
				nextHandlerShow: false,
				inputDisabledCustomStyle: {
					"background-color": "#ffffff"
				}
			}
		},
		mounted() {
			this.taskId = this.currentTaskId;
			this.getDatas()
		},
		methods: {
			getDatas() {
				if (!this.currentNodeId) return;
				getCurrentNodeActions({
					currentNodeid: this.currentNodeId
				}).then(res => {
					if (res.code === 200) {
						const source = res.data.map(m => Number(m));
						this.actions = source.filter(f => ![ActionMap.textVal, ActionMap.richVal].includes(f))
						this.canText = source.includes(ActionMap.textVal);
						this.canFile = source.includes(ActionMap.richVal);
						// this.actions = [3, 4, 1]
						// this.actions = [...this.actions, this.actions[0]]
					}
				})
			},
			onHandle(e) {
				const files = this.cl_fileList.map(m => m.file.imgId) ?? [];
				this.$emit("handle", {
					taskAction: e,
					eventHandler: this.mfEventHandler,
					params: {
						textData: this.textData,
						fileData: files.join(",")
					}
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.action {
		padding: 20rpx 30rpx;
		border-radius: 15rpx;
		width: 48%;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.action:nth-child(2n-1):last-child {
		width: 100%;
	}

	.action:nth-child(2n-1):not(:last-child) {
		margin-right: 4%;
	}

	.upload-custom {
		border-radius: 15rpx;
		border: 1px dashed #aaaaaa;
		// padding: 30rpx;
		color: #aaaaaa;
		width: 200rpx;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>